<template>
     <div v-show="showSpku===3">
        <el-form label-width="80px" >
          <el-form-item label="SPU名称">
            <span>{{spuName}}</span>
          </el-form-item>
           <el-form-item label="SKU名称">
              <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
           </el-form-item>
           <el-form-item label="价格(元)">
              <el-input type="number" placeholder="SKU价格" v-model="skuInfo.price" ></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
              <el-input type="number" placeholder="SKU重量"  v-model="skuInfo.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
              <el-input placeholder="SKU规格描述" type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>
             <el-form-item label="平台属性">
              <el-form :inline="true"  label-width="80px">
                <el-form-item :label="item.attrName" v-for="item in attrInfoList" :key='item.id'>
                  <el-select v-model="item.valueId">
                    <el-option :label="aitem.valueName" :value="aitem.id" v-for="aitem in item.attrValueList" :key='aitem.id'></el-option>
                  </el-select>
                </el-form-item>
              </el-form>   
            </el-form-item>
            <el-form-item label="销售属性">
              <el-form :inline="true"  label-width="80px">
                <el-form-item :label="item.saleAttrName" v-for="item in spuSaleAttrList" :key='item.id'>
                  <el-select v-model="item.valueId">
                    <el-option :label="sitem.saleAttrValueName" :value="sitem.id" v-for="sitem in item.spuSaleAttrValueList" :key='sitem.id'></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              
            </el-form-item>
            <el-form-item label="图片列表">
              <el-table
                :data='spuImageList'
                border
                @selection-change="handleSelectionChange">
               <el-table-column
                type="selection"
                align="center"
                >
              </el-table-column>
              <el-table-column
                label="图片" >
                 <template v-slot='{row}'>
                  <el-image
                   style="width: 100px; height: 100px"
                  :src="row.imgUrl"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop='imgName'
                label="名称" >
              </el-table-column>
              <el-table-column
                label="操作">
                <template v-slot='{row}'>
                  <el-tag type="success" v-if="row.isDefault==='1'">默认</el-tag>
                <el-button type="primary" v-else @click='setDefault(row)'>设为默认</el-button>
                </template>
              </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item >
             <el-button type="primary"  @click='save'>保存</el-button>
             <el-button @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
        
    </div>

</template>

<script>
export default {
  components: {},
   props:['showSpku'],
  data() {
    return {
      skuInfo:{
          category3Id: null,
          spuId: null,
          tmId: null,
          skuName: "",
          skuDesc: "",
          price: null,
          weight: null,
          skuDefaultImg: "",
          skuAttrValueList: [],
          skuSaleAttrValueList: [],
          skuImageList: []
        },
      attrInfoList:[],
      spuSaleAttrList:[],
      spuImageList:[],
      spuName:'',
      selectedImg:[]
    };
  },
  computed: {},
  methods: {
    cancel(){
      this.resetData()
      this.$emit('update:showSpku',1)
    },
    resetData(){
      this.skuInfo={
          category3Id: null,
          spuId: null,
          tmId: null,
          skuName: "",
          skuDesc: "",
          price: null,
          weight: null,
          skuDefaultImg: "",
          skuAttrValueList: [],
          skuSaleAttrValueList: [],
          skuImageList: []
        }
      this.attrInfoList=[],
      this.spuSaleAttrList=[],
      this.spuImageList=[],
      this.spuName='',
      this.selectedImg=[]
      
    },
    async save(){
      const{skuInfo,attrInfoList,spuSaleAttrList,spuImageList}=this
      attrInfoList.forEach(item=>{
        if(item.valueId){
          skuInfo.skuAttrValueList.push({
            attrId:item.id,
            valueId:item.valueId
          })
        }
      })

      skuInfo.skuSaleAttrValueList=spuSaleAttrList.reduce((pre,item)=>{
        if(item.valueId){
          pre.push({
            saleAttrValueId:item.valueId
          })
        }
      },[])
      skuInfo.skuImageList=spuImageList.map(item=>({
        imgName:item.imgName,
        imgUrl:item.imgUrl,
        spuImgId:item.id,
        isDefault:item.isDefault
      }))
      await this.$api.sku.addUpdate(skuInfo)
      this.$message.success('保存成功')
      this.resetData()
      this.$emit('success')
    },
    setDefault(row){
      this.skuInfo.skuDefaultImg=row.imgUrl
      this.spuImageList.forEach(item=>{
        item.isDefault='0'
      })
      row.isDefault='1'
    },
    handleSelectionChange(val){
      // console.log(val);
      this.selectedImg=val
    },
    async initAddData(spu){
      const {id,spuName,category1Id,category2Id,category3Id,tmId}=spu
      this.spuName=spuName
      this.skuInfo.category3Id=category3Id
      this.skuInfo.spuId=id
      this.skuInfo.tmId=tmId
      const p1=this.$api.attr.getList(category1Id,category2Id,category3Id)
      const p2=this.$api.sku.getSpuSaleAttrList(id)
      const p3=this.$api.sku.getImageList(id)
      const result=await Promise.all([p1,p2,p3])
      this.attrInfoList=result[0].data
      this.spuSaleAttrList=result[1].data
      this.spuImageList=result[2].data.map(item=>({
        ...item,
        isDefault:'0'
      }))
    },

  },
  mounted() {}
};
</script>
<style scoped>
</style>